<template>
  <div class="search">
      <el-autocomplete @select="goDetail" :trigger-on-focus="false" clearable placeholder="请你输入医院名称" v-model="hosname" :fetch-suggestions="fetchData"/>
      <el-button type="primary" size="default" :icon="Search">搜索</el-button>
  </div>
</template>

<script setup lang='ts'>
// 引入element-plus提供图标
import {Search} from "@element-plus/icons-vue";
import {useRouter} from 'vue-router';
import {ref} from 'vue';
// 引入请求方法
import {reqHospitalInfo} from '@/api/home';
import type {HospitalInfo,Content}from '@api/home/type';
// 创建路由器对象
let $router=useRouter();
// 收集搜索的关键字（医院的名字）
let hosname=ref<string>('');
// 顶部组件的回调
const fetchData=async(keyword:string,cb:any)=>{
    // console.log(123);
    // 当用户输入完关键字次函数会执行一次，发请求获取需要展示的数据即可
    let result:HospitalInfo=await reqHospitalInfo(keyword);
    // console.log(result.data);
    // 整理数据，变成人家组件需要数据格式
    let showData=result.data.map(item=>{
        return{
            value:item.hosname,//展示的医院的名字
            hoscode:item.hoscode//存储医院的编码
        }
    })
    // 给组件提供展示的户数
    cb(showData);   
}

// 点击某一个推荐项
const goDetail=(item:any)=>{
    // 点击推荐项目进入医院详情页，将来需要携带query参数(医院的编码)
    // console.log('a');
    
    // console.log(item);
    
    $router.push({path:'/hospital/register',query:{hoscode:item.hoscode}})
}

// 深度选择器:>>> /deep/ ::v-deep

</script>
<script lang="ts">
  export default{
    name:'Search'
  }
</script>
<style scoped lang='scss'>
.search{
    width:100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;
    ::v-deep(.el-input__wrapper){
        width:600px;
        margin-right: 10px;
    }
}
</style>